<template>
  <div>
    <div class="chat-container">
      <div class="title">
        <img src="" alt class="logo" />
        <span class="title-hn">智能导师</span>
      </div>
      <div class="chat-box" ref="chatBox">
        <div v-for="(message, index) in messages" :key="index" class="message">
          <div v-if="message.type === 'user'" class="user-message">
            {{ message.text }}
          </div>
          <div v-else class="bot-message">{{ message.text }}</div>
        </div>
      </div>
    </div>
    <div class="setproblem">
      <textarea
        placeholder="请输入您的问题..."
        style="
          height: 68px;
          width: 100%;
          resize: none;
          padding-right: 80px;
          outline: none;
          border-color: #ccc;
          border-radius: 5px;
        "
        v-model="question"
        @keyup.enter="sendMessage"
      ></textarea>
      <el-button @click="sendMessage" class="buttonsend">
        <span style="vertical-align: 4px">发送</span>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { aiAnswerings } from "@/api/answering/index";
import { answeringForm } from "@/api/answering/type";

const messages = ref([]);
const question = ref("");

const sendMessage = async () => {
  if (question.value.trim() === "") {
    return;
  }

  messages.value.push({ type: "user", text: question.value });
  // console.log(question.value);

  try {
    const response = await aiAnswerings(question.value);
    console.log(response);

    messages.value.push({ type: "bot", text: response.msg });
  } catch (error) {
    console.log(error);
    messages.value.push({
      type: "bot",
      text: "抱歉，出现了一些问题，请稍后再试。",
    });
  }

  question.value = "";
  scrollToBottom();
};
onMounted(() => {
  sendMessage();
});

// function sendMessage(question?: string) {
//   getActivitiesMenuIds(question).then(({ answer }) => {
//     messages.value.push({ type: "bot", text: answer });
//   });
// }

const chatBox = ref<HTMLElement | null>(null);
const scrollToBottom = () => {
  nextTick(() => {
    chatBox.value.scrollTop = chatBox.value.scrollHeight;
  });
};
</script>

<style>
.chat-container {
  width: 100%;
  height: 100%;
  height: 599px;
  border: 1px solid #ccc;
  overflow-y: scroll;
}

.chat-box {
  padding: 10px;
}

.message {
  margin-bottom: 10px;
}

.user-message {
  background-color: #f0f0f0;
  padding: 5px;
}

.bot-message {
  background-color: #e0e0e0;
  padding: 5px;
}

input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  outline: none;
  height: 68px;
}

.setproblem {
  width: 90%;
  height: 68px;
  background-color: #ffffff;
  position: relative;
  margin-top: 20px;
  padding-bottom: 20px;
}
.setproblem textarea {
  margin-bottom: 10px;
  color: #999999;
  padding: 10px;
  box-sizing: border-box;
}
.buttonsend {
  background: #3163c5;
  opacity: 1;
  border-radius: 4px;
  font-size: 10px;
  color: #ffffff;
  position: absolute;
  right: -10%;
  top: 30%;
  cursor: pointer;
  border: none;
}
.title {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 25px;
  color: cornflowerblue;
}
</style>
